<template>
  <div>
    <img
      class="middle-index-bg"
      :src="require('@/assets//middle_index/bg.png')"
    />
    <div class="header">
      <div class="logo">
        <img :src="require('@/assets//middle_index/rflight-white-logo.png')" />
      </div>
    </div>

    <div class="mid">
      <div class="d" style="">
        <div class="ba"></div>
        <div class="bb">
          <img
            :src="require('@/assets//middle_index/jishuzhongtai_icon_1.png')"
          />
        </div>
        <div class="bc">
          <span>区块链</span>
        </div>
        <div class="bd">
          <span></span>
        </div>
        <div class="be">
          <img :src="require('@/assets//middle_index/jingru_icon_1.png')" />
        </div>
      </div>

      <div class="d" style="margin-left: 47vw">
        <div class="ba"></div>
        <div class="bb">
          <img
            :src="require('@/assets//middle_index/jishuzhongtai_icon_1.png')"
          />
        </div>
        <div class="bc">
          <span>软件分发平台</span>
        </div>
        <div class="bd">
          <span></span>
        </div>
        <div class="be">
          <img :src="require('@/assets//middle_index/jingru_icon_1.png')" />
        </div>
      </div>
    </div>

    <div class="body">
      <div class="one-row">
        <div class="d">
          <div class="ba"></div>
          <div class="bb">
            <img
              :src="require('@/assets//middle_index/jishuzhongtai_icon_1.png')"
            />
          </div>
          <div class="bc">
            <span>无线电监测一体化平台</span>
          </div>
          <div class="bd">
            <span></span>
          </div>
          <div class="be">
            <img :src="require('@/assets//middle_index/jingru_icon_1.png')" />
          </div>
        </div>

        <div class="d" style="margin: 1vh 1vh" @click="toBoerIndex">
          <div class="ba"></div>
          <div class="bb">
            <img
              :src="require('@/assets//middle_index/jishuzhongtai_icon_1.png')"
            />
          </div>
          <div class="bc">
            <span>原子服务与管控平台调用</span>
          </div>
          <div class="bd">
            <span></span>
          </div>
          <div class="be">
            <img :src="require('@/assets//middle_index/jingru_icon_1.png')" />
          </div>
        </div>

        <div class="d" style="margin: 1vh 0vh">
          <div class="ba"></div>
          <div class="bb">
            <img
              :src="require('@/assets//middle_index/jishuzhongtai_icon_1.png')"
            />
          </div>
          <div class="bc">
            <span>开放的原子化封装API库</span>
          </div>
          <div class="bd">
            <span></span>
          </div>
          <div class="be">
            <img :src="require('@/assets//middle_index/jingru_icon_1.png')" />
          </div>
        </div>

        <div class="d" style="margin: 1vh 1vh" @click="toMainIndex">
          <div class="ba"></div>
          <div class="bb">
            <img
              :src="require('@/assets//middle_index/jishuzhongtai_icon_1.png')"
            />
          </div>
          <div class="bc">
            <span>第三方平台的对接与调用</span>
          </div>
          <div class="bd">
            <span></span>
          </div>
          <div class="be">
            <img :src="require('@/assets//middle_index/jingru_icon_1.png')" />
          </div>
        </div>

        <div class="d" style="" @click="toCombineThree">
          <div class="ba"></div>
          <div class="bb">
            <img
              :src="require('@/assets//middle_index/jishuzhongtai_icon_1.png')"
            />
          </div>
          <div class="bc">
            <span>数据中心之间的共享与对接</span>
          </div>
          <div class="bd">
            <span></span>
          </div>
          <div class="be">
            <img :src="require('@/assets//middle_index/jingru_icon_1.png')" />
          </div>
        </div>

        <div class="d" style="">
          <div class="ba"></div>
          <div class="bb">
            <img
              :src="require('@/assets//middle_index/jishuzhongtai_icon_1.png')"
            />
          </div>
          <div class="bc">
            <span>网格监测云平台</span>
          </div>
          <div class="bd">
            <span></span>
          </div>
          <div class="be">
            <img :src="require('@/assets//middle_index/jingru_icon_1.png')" />
          </div>
        </div>

        <div class="d" style="margin: 0vh 1vh">
          <div class="ba"></div>
          <div class="bb">
            <img
              :src="require('@/assets//middle_index/jishuzhongtai_icon_1.png')"
            />
          </div>
          <div class="bc">
            <span>车联网无线电安全保障系统</span>
          </div>
          <div class="bd">
            <span></span>
          </div>
          <div class="be">
            <img :src="require('@/assets//middle_index/jingru_icon_1.png')" />
          </div>
        </div>

        <div class="d" style="margin: 0 1vh 0 0">
          <div class="ba"></div>
          <div class="bb">
            <img
              :src="require('@/assets//middle_index/jishuzhongtai_icon_1.png')"
            />
          </div>
          <div class="bc">
            <span>无线电监测数据中心</span>
          </div>
          <div class="bd">
            <span></span>
          </div>
          <div class="be">
            <img :src="require('@/assets//middle_index/jingru_icon_1.png')" />
          </div>
        </div>

        <div class="d" style="margin: 0 1vh 0 0">
          <div class="ba"></div>
          <div class="bb">
            <img
              :src="require('@/assets//middle_index/jishuzhongtai_icon_1.png')"
            />
          </div>
          <div class="bc">
            <span>人工智能算法应用平台</span>
          </div>
          <div class="bd">
            <span></span>
          </div>
          <div class="be">
            <img :src="require('@/assets//middle_index/jingru_icon_1.png')" />
          </div>
        </div>

        <div class="d" style="">
          <div class="ba"></div>
          <div class="bb">
            <img
              :src="require('@/assets//middle_index/jishuzhongtai_icon_1.png')"
            />
          </div>
          <div class="bc">
            <span>设备与文档资源库</span>
          </div>
          <div class="bd">
            <span></span>
          </div>
          <div class="be">
            <img :src="require('@/assets//middle_index/jingru_icon_1.png')" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { recordRoute } from '@/config'
export default {
  name: 'MiddleIndex',
  data: () => {
    return {}
  },
  mounted () { },
  methods: {
    toMainIndex () {
      this.$router.push('/platformPlay/mapView')
    },
    toBoerIndex () {
      this.$router.push('/platformPlay/boerIndex')
    },
    toCombineThree () {
      this.$router.push('/platformPlay/combineThree')
    },
  },
}
</script>
<style lang='scss' scoped>
// .middle-index-bg {
//   height: 100%;
//   width: 100%;
//   border: none;
// }
html,
body {
  height: 100%;
  width: 100%;
  overflow: hidden;
  background-color: #004ba6;
}
img {
  // height: 100%;
  width: 100%;
}

.header {
  position: absolute;
  width: 100%;
  height: 8vh;
  top: 0;
  left: 0;

  .logo {
    width: 15vw;
    height: 100%;

    .logo-render {
      width: 400px;
      // height: 210px;
    }
  }
}

.d:hover {
  background: #3578fc;
}
.d:hover .ba {
  display: none;
}
.d:hover .bc {
  color: #ffffff;
}
.d:hover .bd {
  color: #ffffff;
}

.mid {
  width: auto;
  height: 50%;
  position: absolute;
  left: 20vh;
  top: 9vh;
  margin: 0 auto;
}

.body {
  width: auto;
  height: 50%;
  position: absolute;
  left: 20vh;
  top: 45vh;
  margin: 0 auto;
}

.d {
  width: 15vw;
  height: 36vh;
  display: inline-block;
  position: relative;

  .ba {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: #3364a3;
    opacity: 0.4;
    z-index: 0;
  }

  .bb {
    width: 4vw;
    height: 8vh;
    margin: 0 auto;
    z-index: 1;
  }

  .bc {
    width: 100%;
    height: 5vh;
    margin: 0 auto;
    color: rgba(255, 255, 255);
    text-align: center;
    font-size: 2.5vh;
    z-index: 1;
  }

  .bd {
    width: 85%;
    height: 15vh;
    margin: 1vh auto;
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.5vh;
    text-indent: 1.5vw;
    z-index: 1;
  }

  .be {
    width: 2.5vw;
    height: 5vh;
    margin: 0 auto;
    cursor: pointer;
    z-index: 1;
  }
}
</style>
